<template>
  <view class="tabWrap">
    <view class="tabList">
      <text
        class="tabList_item"
        v-for="(item,index) of tabList"
        :key="item.catalog"
        @click="clickTab(item.catalog,index)"
        :class="{active:swiperIndex === index}"
      >{{item.name}}</text>
    </view>
    <text class="line"></text>
    <view class="screen">
      <text class="screen_text" @click="screen(0)" :class="{active:sort === 'created'}">最新</text>
      <text class="screen_text" @click="screen(1)" :class="{active:sort === 'answer'}">热议</text>
    </view>
  </view>
</template>

<script>

export default {
  data () {
    return {
      tabList: [
        {
          name: '首页',
          catalog: ''
        },
        {
          name: '分享',
          catalog: 'share'
        },
        {
          name: '提问',
          catalog: 'ask'
        },
        {
          name: '公告',
          catalog: 'notice'
        }
      ],
      sort: 'created',
      swiperIndex: 0
    }
  },
  created () {
    uni.$on('giveSwiperIndex', this.getSwiperIndex)
  },
  beforeDestroy () {
    uni.$off('giveSwiperIndex', this.getSwiperIndex)
  },
  methods: {
    getSwiperIndex (index) {
      this.swiperIndex = index
    },
    clickTab (catalog, index) {
      uni.$emit('giveTabInfo', { catalog, index })
    },
    screen (val) {
      switch (val) {
        case 0:
          this.sort = 'created'
          break
        case 1:
          this.sort = 'answer'
          break
      }
      uni.$emit('giveSort', this.sort)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabWrap {
  width: 750rpx;
  height: 80rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  color: rgb(119, 119, 119);
  border-bottom: 1rpx solid rgba(31, 182, 131, 0.2);
}
.active{
	color:rgb(31, 182, 131);
	font-weight: bold;
}
.tabList {
	width: 530rpx;
	display: flex;
	flex-direction: row;
	padding: 0 20rpx;
	justify-content: space-between;
	align-items: center;
	&_item{
		font-size: 28rpx;
	}
}
.line {
	width: 1rpx;
	height: 40rpx;
	line-height: 40rpx;
	background-color: rgb(31, 182, 131);
}
.screen {
	width: 170rpx;
	display: flex;
	flex-direction: row;
	padding: 0 20rpx;
	justify-content: space-between;
	align-items: center;
	&_text{
		font-size: 28rpx;
	}
}
</style>